<!DOCTYPE html>
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<meta id="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
		<meta name="apple-themes-web-app-capable" content="yes">
		<meta content="yes" name="apple-mobile-web-app-capable">
		<meta content="black" name="apple-mobile-web-app-status-bar-style">
		<meta content="telephone=no" name="format-detection">
		<meta content="email=no" name="format-detection">
		<meta name="format-detection" content="telephone=no">
		<title>首页</title>	
		<link rel="stylesheet" href="${s.base}/mobile/css/main.css" type="text/css" media="all">
        <link rel="stylesheet" href="${s.base}/mobile/css/weui.min.css" type="text/css" media="all">
        <link rel="stylesheet" href="${s.base}/mobile/css/jquery-weui.min.css" type="text/css" media="all">
        <style type="text/css">
            /*底部购买*/
            #bug_div{height:3.86rem;overflow: hidden; text-align: center; width:100%; margin:0 auto; z-index:98; position:fixed; bottom:0; left:0px; background-color:#F8F8F8; border-top:1px solid #CCC;}
            #bug_div .home_foot_b{background:#cccccc;border-top:1px solid #eeeeee; }
            #bug_div .bug_top,.bug_center{width:100%;}
            #bug_div .bug_top .bug_left{ float:left; width:20%;height:50px; text-align:right; }
            #bug_div .bug_top .but_content{width:60%;float:left;height:50px; }
            #bug_div .bug_top .but_content .but_content_title{ font-size:16px; line-height:30px; color:#000; width:100%;}
            #bug_div .bug_top .but_content .but_content_desc{font-size:14px; line-height:20px; color:#3e3e3e; width:100%;}
            #bug_div .bug_top .bug_right{width:20%;float:left;height:50px; text-align:center;}
            #bug_div .bug_top .bug_right img{ width:30px; height:30px; background-color:#F8F8F8;}

            #bug_div .bug_center .bug_left{ float:left; width:29%;height:40px; text-align:right; margin-right:1%; }
            #bug_div .bug_center .but_content{width:40%;float:left;height:40px; }
            #bug_div .bug_center .bug_right{width:29%;float:left;height:40px; text-align:left; margin-left:1%;}
            #bug_div .bug_center .but_content input{ width:100%;;height:30px; font-size:16px; border:1px solid #CCC;}
            #bug_div .bug_center .bug_left input{ width:40px;height:30px; font-size:16px; border:1px solid #CCC; border-radius:5px;}
            #bug_div .bug_center .bug_right input{ width:40px;height:30px; font-size:16px; border:1px solid #CCC; border-radius:5px;}

            #bug_div .bug_bottom{width:60%;height:30px; text-align:center; margin-left:20%; }
            #bug_div .bug_bottom input{ float:left; width:20%;height:30px;font-size:16px; border:1px solid #CCC; border-radius:5px; margin-left:5%; }
            #bug_div .bug_title{width:60%;height:20px; text-align:center; margin-left:20%; font-size:14px; line-height:20px; color:#3e3e3e;}
            #bug_div .bug_title span{color:#F00;}

            #bug_div .bug_btn{width:60%;height:50px; text-align:center;  margin-left:20%; clear:both; }
            #bug_div .bug_btn input{width:100%;height:35px; text-align:center; margin-top:30px; font-size:0.28rem; color:#fff; display:inline-block; background-color:#d91d37; border:1px solid #d91d37; border-radius:5px;  }
            .home_foot{width: 100%;}
            .home_foot #qindanBtn{width: 25%;float: left;background: #09bb07;}
            .home_foot #buyBtn{width: 75%;float: left; }

            .tooltips{position:relative;width:100%;height:115px;line-height:60px;background:#F9F9F9;border:1px solid #ebebeb;border-radius:4px;margin-top:5px;}
            .arrow{position:absolute;width: 0px;height:0px;line-height: 0px;border-width: 0 10px 15px ;border-style: solid dashed dashed dashed;border-left-color: transparent;border-right-color: transparent;}
            .arrow-border{color: #F9F9F9;top:-10px;left: 5%;}
            .arrow-bg{color: #F9F9F9;top:-10px;left: 5%;}
            .liuliang{width:99%;height:115px;color:#000;padding-left:1%;}
            .liuliang .liuliang_title{width:100%;height:28px;line-height:28px;font-size:12px;}
            .liuliang .liuliang_content{width:100%;}
            .liuliang .liuliang_content .liuliang_content_left{width:30%;text-align:left;float:left;}
            .liuliang .liuliang_content .liuliang_content_left img{width:80px;height:80px;}
            .liuliang .liuliang_content .liuliang_content_right{width:70%;text-align:left;float:left;}
            .liuliang .liuliang_content .liuliang_content_right .liuliang_content_right_font{width:100%;text-align:left;font-size:12px;line-height:20px;}
            .inner-box{color: #000;}
        </style>
	</head>

	<body>

 	<!--页面加载 开始-->
     <!--<div id="preloader">
     <div id="status">
      <p class="center-text"><span>拼命加载中···</span></p>
     </div>
    </div>-->
    <!--页面加载 结束-->    
		<div id="content_div_b" class="p_bottom">
				<!--产品轮播-->
				<div class="top_pic">
                <div class="left_i" onclick="history.back();"></div>
                    <!--banner图开始-->
                    <div class="xyg-banner swiper-container">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide"><img src="${item.imageOne}" /></div>
                            <div class="swiper-slide"><img src="${item.imageTwo}" /></div>
                            <div class="swiper-slide"><img src="${item.imageThree}" /></div>
                        </div>
                        <div class="swiper-pagination"></div>
                    </div>
                    <!--banner图结束-->
				</div>
				<!--产品轮播结束-->

			<div class="cp_mian">
                <h2>${item.title}</h2>
                <!--<p class="f_bt">【宣传副标题】参与10人次，中奖机率高出10倍</p>-->
                <div class="tooltips">
                    <div class="liuliang" onclick="window.location.href='/phone/selectProduct?productId=${activity.id}&memberId=${memberId}'">
                        <div class="liuliang_title">购买以下流量礼包即可参与商品专享活动</div>
                        <div class="liuliang_content">
                            <div class="liuliang_content_left">
                                <img src="${flowDesc.image}" /></div>
                            <div class="liuliang_content_right">
                                <div class="liuliang_content_right_font">流量礼包</div>
                                <div class="liuliang_content_right_font">${flowDesc.priceDesc}</div>
                                <div class="liuliang_content_right_font">${flowDesc.discount}</div>
                                <div class="liuliang_content_right_font">声明：最终解释权归所有</div></div>
                        </div>
                    </div>
                    <div class="arrow arrow-border"></div>
                    <div class="arrow arrow-bg"></div>
                </div>


                <ul>
                <p>期号：${activity.periodNum} <span>已完成 <em>${activity.progress}%</em></span></p>
                <li><em style="width:${activity.progress}%;"></em></li>
                <p>总需人次 ${activity.totalNum} <span>剩余人次 <em> ${activity.totalNum-activity.readyNum}</em></span></p>
                </ul>
			</div>
            <!--<div class="cp_d01">
            马上登录1元购，收获惊喜！<a>立即登录</a>
            </div>-->
           
            <div class="cp_list">
              <ul onclick="window.location.href='/phone/itemDesc/${activity.itemId}?memberId=${memberId}'">
                <li ><em></em> 商品详情  <span>建议在WiFi下查看</span></li>
                <i></i>
              </ul>
              <ul onclick="window.location.href='/phone/itemEchart/${activity.itemId}/${activity.id}/${activity.periodsNum}?memberId=${memberId}'">
                <li><em></em> 走势图 </li>
                <i></i>
              </ul>
               <ul>
                <a href="/phone/listPastActPage?memberId=${memberId}&itemId=${activity.itemId}"><li><em></em> 往期揭晓 </li>
                <i></i></a>
              </ul>
               <ul>
                <a href="/phone/itemBuyList/${activity.id}?memberId=${memberId}"><li><em></em> 所有参与记录 </li>
                <i></i></a>
              </ul>
            </div>
            
          
		</div>

    <div id="payPasswordShow" style="display: none;">
        <div class="but_content">
            <input type="text" id="payPassword" value=""/>
        </div>
    </div>

    <!--底部购买-->
    <div id="bug_div" style="display: none;">
        <div class="bug_top">
            <div class="bug_left"></div>
            <div class="but_content">
                <div class="but_content_title">
                    选择参与人次
                </div>
                <div class="but_content_desc">
                    (购买越多几率越大哦)
                </div>
            </div>
            <div class="bug_right">
                <img src="${s.base}/mobile/images/chose_c.png" id="deleteBtn" onclick="deleteBug()"/>
            </div>
        </div>
        <div  class="bug_center">
            <div class="bug_left">
                <input type="button" onclick="jian()" id="jianBtn" value="-"/>
            </div>
            <div class="but_content">
                <input type="number" id="num" value="1"/>
            </div>
            <div class="bug_right">
                <input type="button" onclick="jia()" id="jiaBtn" value="+"/>
            </div>
        </div>
        <div  class="bug_bottom">
            <input type="button" onclick="bugInput(this)" data-value="5" value="5"/>
            <input type="button" onclick="bugInput(this)" data-value="10" value="10"/>
            <input type="button" onclick="bugInput(this)" data-value="100" value="100"/>
            <input type="button" onclick="bugInput(this)" data-value='${activity.totalNum-activity.readyNum}' value="包尾"/>
        </div>
        <div  class="bug_title">
            共<span id="showMoney">${item.price}</span>个钻石
        </div>
        <div class="bug_btn">
            <input type="button" id="winNum" onclick="winNum()" value="确定"/>
        </div>
    </div>
    <!--底部购买结束-->

        <!--底部-->
         <div id="foot_div">
          <div class="home_foot"><a id="qindanBtn" onclick="qindanBtn()" href="javascript:void(0)">加入清单</a><a id="buyBtn" onclick="buyBug()" href="javascript:void(0)">立即参与</a></div>
         </div>
        <!--底部结束-->
        <script type="text/javascript" src="${s.base}/mobile/js/jquery.min.js"></script>
        <script type="text/javascript" src="${s.base}/mobile/js/jquery-weui.min.js"></script>
        <script type="text/javascript" src="${s.base}/mobile/js/swiper.min.js"></script>

        <script type="text/javascript" src="${s.base}/mobile/js/common.js"></script>
        <script type="text/javascript" src="${s.base}/js/layer/layer.js"></script>
        <script type="text/javascript" src="${s.base}/mobile/js/passwordBox.min.js"></script>
        <script type="text/javascript" src="${s.base}/js/base/commont.js"></script>
        <script>
            $(".xyg-banner").swiper({
                loop: true,
                autoplay: 3000
            });

            /***************支付方法****************/
            function payMethod(memberId,payPassword,activityId,num,itemId){
                if(payPassword == null || payPassword == ""){
                    layer.alert("您必须先设置支付密码！");
                    return false;
                }
                /**
                 * init传入参数依次是：正确密码(传空时不对比输入是否正确),密码键盘背景，标题，副标题
                 * */
                PwdBox.init(payPassword,'/mobile/images/pwd_keyboardw.png','请输入支付密码','安全支付环境，请放心使用！');
                /**
                 *res格式：{status:'true或false',password:'用户输入的密码'}
                 *
                 */
                PwdBox.show(function(res){
                    var password=res.password;
                    if(res.status){
                        $.get("/activity/winningNum",{
                            memberId : memberId,
                            activityId : activityId,
                            itemId:itemId,
                            num : num
                        },function(result){
                            if (result.returnInfo.state == '1'){
                                showLayerAlertNoRefre("夺宝成功！");
                            } else {
                                showLayerAlertNoReload(result.returnInfo.errorMsg);
                            }
                        },"json");
                    }else{
                        //重置输入
                        layer.alert('密码不正确，请重新输入！');
                        //关闭并重置密码输入
                        PwdBox.reset();
                        resultNum(num);

                    }
                });
            };
            /****************************************/


            function buyBug() {
                $("#foot_div").hide();
                $("#bug_div").show();
            };
            function deleteBug() {
                $("#bug_div").hide();
                $("#foot_div").show();
            };

            function bugInput(obj) {
                resultNum($(obj).attr("data-value"));
            }
            function jia() {
                if($("#num").val()*1>0){
                    resultNum($("#num").val()*1+1);
                }else{
                    resultNum(1);
                }
            }
            function jian() {
                if ($("#num").val() * 1 > 1) {
                    resultNum($("#num").val() * 1 - 1);
                } else {
                    resultNum(1);
                }
            };
            var itemId = '${item.id}';
            var price = '${item.price}';
            var personNum = '${item.personNum}';
            var memberId = '${memberId}';
            var payPassword = '${payPassword}';
            function resultNum(value) {
                $("#num").val(value);
                $("#showMoney").html(price*1*value);
            }
            var activityId = '${activity.id}';

            function winNum() {
                var mem = getCookie('memberId');
                var minPurchaseNum = '${item.minPurchaseNum}';
                var memberMoney = '${member.money}';
                var num = $("#num").val() * price;
                if(Number(num) <= 0){
                    layer.alert("您必须输入夺宝钻石");
                    return false;
                }
                if(Number(num) < minPurchaseNum){
                    layer.alert("您必须输入最低夺宝钻石：" + minPurchaseNum);
                    return false;
                }
                if (Number(num) > memberMoney){
                    layer.alert("您的钻石不足,请充值");
                    return false;
                }
                payMethod(memberId,payPassword,activityId,num,itemId);
            }

            function qindanBtn () {
                $.post("/cart/updateOrAddEntity",{
                    memberId : memberId,
                    itemId : itemId
                },function(result){
                    if(1==result.returnInfo.state){
                        showLayerAlertNoReload("操作成功！");
                    }else{
                        showLayerAlertNoReload(result.returnInfo.errorMsg);
                    }
                },"json");
                return false;
            }
        </script>
	</body>

</html>